<template>
  <div class="drawer_box">
    <div class="btn_box" style="margin-right: 10px">
      <div
        @click="btnClick(item, index)"
        :class="{ isAtv: isIndex == index }"
        class="itemz flex_center_center"
        v-for="(item, index) in jqArrCv"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div style="width: 90%" class="isTable">
      <div style="margin-bottom: 10px">
        <el-date-picker
          v-model="datePicker"
          type="date"
          placeholder="选择日期"
          size="default"
          value-format="YYYY-MM-DD"
          @change="chanse"
        />
      </div>
      <el-table
        :data="tableDatas"
        fit
        highlight-current-row
        stripe
        style="width: 100%"
        border
      >
        <el-table-column prop="dates" label="整点" align="center">
          <template #default="scope">
            <div>
              {{ scope.row.date }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="zcfr" label="在册" align="center">
          <template #default="scope">
            {{ scope.row.zcfr }}
          </template>
        </el-table-column>
        <el-table-column prop="zyfr" label="在押" align="center">
          <template #default="scope">
            {{ scope.row.zyfr }}
          </template>
        </el-table-column>

        <el-table-column prop="syfr" label="实押" align="center">
          <template #default="scope">
            {{ scope.row.syfr }}
          </template>
        </el-table-column>

        <el-table-column prop="jnzy" label="内院" />
        <el-table-column prop="ljtq" label="探亲" />
        <el-table-column prop="jbfr" label="禁闭" />
        <el-table-column prop="cjxd" label="惩戒" />
        <el-table-column prop="jwzy" label="外院" />
        <el-table-column prop="jwzx" label="执行" />
        <el-table-column prop="jhzs" label="再审" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Back,
  Right,
} from "@element-plus/icons-vue";

import http from "@/utils/api";
import jjbjlTwo from "../components/jjbjlTwo.vue";
import towZfxx from "../components/towZfxx.vue";
import zdzf from "../components/zdzf.vue";
import yxry from "../components/yxry.vue";
import router from "@/router";
import jgsb from "@/components/jgsb.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
} from "vue";
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  jqArr: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
});
let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");
let datePicker = ref("");
let tableDatas = ref([
  {
    date: "7:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "8:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "9:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "10:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "11:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "12:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "13:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "14:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "15:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "16:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "17:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "18:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "19:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "20:00",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    name: "--",
    jhzs: "--",
  },
  {
    date: "21:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "22:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
]);
let tableDatasCv = ref([
  {
    date: "7:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "8:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "9:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "10:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "11:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "12:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "13:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "14:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "15:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "16:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "17:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "18:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "19:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "20:00",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    name: "--",
    jhzs: "--",
  },
  {
    date: "21:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
  {
    date: "22:00",
    name: "--",
    syfr: "--",
    tpfr: "--",
    zcfr: "--",
    zyfr: "--",
    jbfr: "--",
    cjxd: "--",
    jnzy: "--",
    jrxm: "--",
    jwzx: "--",
    jwzy: "--",
    ljtq: "--",
    jhzs: "--",
  },
]);

const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};

let jqArrCv = ref([]);
let isIndex = ref(0);
let selectValue = ref("");
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getClockLast();
};
const chanse = (row) => {
  if (row) {
    getClockLast();
  } else {
    datePicker.value = daydata.value;
    getClockLast();
  }
};

const getClockLast = async () => {
  let res = await http.zfpt.ClockLast({
    orgId: selectValue.value,
    date: datePicker.value,
    hour: "",
    async: "",
  });
  if (res && res.code == 0) {
    if (res.data.length) {
             tableDatas.value.forEach((itz)=>{
            for (let key in itz) {
              if (key != "date") {
                itz[key] = '--';
              }
            }
        })
      res.data.forEach((item) => {
   
        tableDatas.value.forEach((itz) => {
          if (
            Number(itz.date.split(":")[0]) == Number(item.hour.split(":")[0])
          ) {
            for (let key in item) {
              if (key != "date") {
                itz[key] = item[key];
              }
            }
          }
        });
      });
    }else{
        tableDatas.value.forEach((item)=>{
            for (let key in item) {
              if (key != "date") {
                item[key] = '--';
              }
            } 
        }) 
    }
  }
};



watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      getFormattedDateTime();
      datePicker.value = daydata.value;
      if (props.jqArr) {
        // optionsS.value = props.jqArr;
        // selectValue.value = optionsS.value[0].id;
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));

        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq[0];

        // jqArrCv.value.unshift(allObj);
        getClockLast();
      }
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">

.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}
.drawer_box {
  width: 100%;
  display: flex;
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
}

::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
</style>
